<template>
	<el-dialog v-model="props.show" width="500" close-icon="CloseBold" @close="close">
		<template #header>
			<div class="text-#000000 text-18px font-bold">
				{{ title }}
			</div>
		</template>
		<template #default>
			<div v-if="props.name == '银行卡'" class="mt-20px">
				<div class="mb-20px">
					<p class="text-#86909C text-14px mb-10px">姓名</p>
					<div>
						<el-input placeholder="持卡人姓名"></el-input>
					</div>
				</div>
				<div class="mb-20px">
					<p class="text-#86909C text-14px mb-10px">银行卡</p>
					<div>
						<el-input placeholder="请输入您的银行卡卡号"></el-input>
					</div>
				</div>
				<div class="mb-20px">
					<p class="text-#86909C text-14px mb-10px">银行名称</p>
					<div>
						<el-input placeholder="请输入银行卡名称"></el-input>
					</div>
				</div>
				<div class="mb-40px">
					<p class="text-#86909C text-14px mb-10px">支行名称</p>
					<div>
						<el-input placeholder="请输入支行名称"></el-input>
					</div>
				</div>
				<div class="mb-20px">
					<el-button type="primary" color="#114CEE" style="width:100%;height:50px;font-size:18px;">
						确定
					</el-button>
				</div>
			</div>
			<div v-if="props.name == '支付宝'" class="mt-20px">
				<div class="mb-20px">
					<p class="text-#86909C text-14px mb-10px">姓名</p>
					<div>
						<el-input placeholder="请输入您的姓名"></el-input>
					</div>
				</div>
				<div class="mb-40px">
					<p class="text-#86909C text-14px mb-10px">支付宝</p>
					<div>
						<el-input placeholder="请输入您的支付宝账号"></el-input>
					</div>
				</div>
				<div class="mb-40px">
					<p class="text-#86909C text-14px mb-10px">收款二维码</p>
					<div>
						<el-upload class="avatar-uploader-addDialog" :show-file-list="false"
							:on-success="handleAvatarSuccess">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<div v-else>
								<img src="/transaction/c2c/c2cPersonal/addPay/add.svg" alt="">
								<p class="text-#86909C text-14px">上传</p>
							</div>
						</el-upload>
					</div>
				</div>
				<div class="mb-20px">
					<el-button type="primary" color="#114CEE" style="width:100%;height:50px;font-size:18px;">
						确定
					</el-button>
				</div>
			</div>
			<div v-if="props.name == '微信'" class="mt-20px">
				<div class="mb-20px">
					<p class="text-#86909C text-14px mb-10px">姓名</p>
					<div>
						<el-input placeholder="请输入您的姓名"></el-input>
					</div>
				</div>
				<div class="mb-40px">
					<p class="text-#86909C text-14px mb-10px">微信</p>
					<div>
						<el-input placeholder="请输入您的微信账号"></el-input>
					</div>
				</div>
				<div class="mb-40px">
					<p class="text-#86909C text-14px mb-10px">收款二维码</p>
					<div>
						<el-upload class="avatar-uploader-addDialog" :show-file-list="false"
							:on-success="handleAvatarSuccess">
							<img v-if="imageUrl" :src="imageUrl" class="avatar" />
							<div v-else>
								<img src="/transaction/c2c/c2cPersonal/addPay/add.svg" alt="">
								<p class="text-#86909C text-14px">上传</p>
							</div>
						</el-upload>
					</div>
				</div>
				<div class="mb-20px">
					<el-button type="primary" color="#114CEE" style="width:100%;height:50px;font-size:18px;">
						确定
					</el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import type { UploadProps } from 'element-plus'

interface IProps {
	show: boolean;
	name: string;
}

const props = defineProps<IProps>();

const title = computed(() => {
	const t = '添加';
	return t + props.name;
})

const emit = defineEmits(['close']);

const close = () => {
	emit('close', false);
}

const imageUrl = ref<any>('');

const handleAvatarSuccess: UploadProps['onSuccess'] = (
	response,
	uploadFile
) => {
	imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

</script>
<style lang="scss" scoped>
::v-deep .el-input__wrapper {
	padding: 10px 20px;
}

::v-deep .el-input__inner {
	font-size: 18px;
}
</style>
<style lang="scss">
.avatar-uploader-addDialog .avatar {
	width: 148px;
	height: 148px;
	display: block;
}

.avatar-uploader-addDialog .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 148px;
	height: 148px;
}



.avatar-uploader-icon {
	font-size: 30px;
}
</style>
